import React from 'react';
import styles from './index.module.less';

interface SimpleLoadingProps {
  width?: number | string;
  height?: number | string;
  gap?: number;
  parts?: number;
  style?: React.CSSProperties;
}

const SimpleLoading: React.FC<SimpleLoadingProps> = ({
  width = '100%',
  height = '100%',
  gap = 8,
  parts = 1,
  style = {},
}) => {
  const partWidth = `calc((100% - ${(parts - 1) * gap}px) / ${parts})`;

  return (
    <div className={styles.container} style={{ width, height, ...style }}>
      {Array.from({ length: parts }).map((_, index) => (
        <div
          key={index}
          className={styles.part}
          style={{
            width: partWidth,
            marginRight: index < parts - 1 ? gap : 0,
          }}
        />
      ))}
    </div>
  );
};

export default SimpleLoading;
